<!-- weather.html  -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气胶囊</title>
    <link rel="stylesheet" href="./fontawesome-free-6.6.0-web/css/all.min.css"> 
    <link rel="stylesheet" href="weather.css"> 
</head>
<body>
    <!-- <div class="weather-container"> -->
        <div class="weather-card">
            <!-- 加载状态 -->
            <div class="loader">
                <div class="loader-spinner"></div>
                <div class="loader-text">天气胶囊初始化中...</div>
            </div>
            <!-- 正常状态 -->
            <div class="content">
                <div class="header">
                    <div class="location">
                        <i class="fas fa-map-marker-alt"></i>
                        <span id="place">天气胶囊</span>
                    </div>
                    <div class="last-updated">上次更新：<span id="updateTime">-</span></div>
                    <div class="cache-status" id="cacheStatus"></div>
                </div>
                <div class="main-info">
                    <div class="weather-art">
                        <canvas id="weatherCanvas"></canvas>
                        <div id="weatherIcon"></div>
                    </div>
                    <div class="temperature-wrapper">
                        <div class="temperature" id="temperature">--</div>
                        <div class="unit">°C</div>
                    </div>
                </div>
                <div class="weather-meta">
                    <div class="meta-item">
                        <i class="fas fa-wind"></i>
                        <div>
                            <div class="value" id="windSpeed">--</div>
                            <div class="label">风速</div>
                        </div>
                    </div>
                    <!-- 添加一个更美观的分隔元素 -->
                    <div class="meta-divider"></div>
                    <div class="meta-item">
                        <i class="fas fa-tint"></i>
                        <div>
                            <div class="value" id="humidity">--</div>
                            <div class="label">湿度</div>
                        </div>
                    </div>
                </div>
                <div id="welcomeMsg"></div>
            </div>
            <!-- 错误状态 -->
            <div class="error-overlay">
                <div class="error-content">
                    <i class="fas fa-exclamation-triangle"></i>
                    <div class="error-message">天气胶囊暂时失效</div>
                    <button class="retry-btn" onclick="window.location.reload()"> 
                        <i class="fas fa-sync-alt"></i>
                        重试连接 
                    </button>
                </div>
            </div>
        </div>
    <!-- </div> -->
    <script src="weather.js"></script> 
</body>
</html>